<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>莹宝抽取惩罚系统</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: url('https://uploadstatic.mihoyo.com/puzzle/upload/puzzle/2021/11/12/c0f0b68c0ddff38b45b7f5fa74f4a0e3_6758048471369389475.png') no-repeat center center fixed;
      background-size: cover;
      color: white;
      text-align: center;
      padding: 2rem;
    }
    .card {
      padding: 1rem;
      margin: 1rem auto;
      max-width: 600px;
      background: rgba(0,0,0,0.6);
      border-radius: 10px;
    }
    button {
      padding: 0.5rem 1rem;
      font-size: 1rem;
      margin: 0.5rem;
      border-radius: 5px;
      border: none;
      cursor: pointer;
      transition: transform 0.2s, background 0.3s;
    }
    button:hover {
      transform: scale(1.05);
      background: #409eff;
    }
    .result {
      font-size: 1.5rem;
      margin-top: 1rem;
      animation: popIn 0.6s ease;
    }
    @keyframes popIn {
      0% { transform: scale(0.5); opacity: 0; }
      100% { transform: scale(1); opacity: 1; }
    }
    .history {
      text-align: left;
      margin-top: 1rem;
      white-space: pre-wrap;
    }
    @media (max-width: 600px) {
    body {
      padding: 1rem;
      font-size: 0.9rem;
    }
    .card {
      margin: 0.5rem auto;
     padding: 0.8rem;
     max-width: 90%;
    }
    button {
     font-size: 0.9rem;
     padding: 0.4rem 0.8rem;
     margin: 0.3rem;
    }
    .result {
     font-size: 1.2rem;
   }
}

  </style>
</head>
<body>
  <audio id="bgm" loop>
    <source src="./music/陈慧娴 - 千千阙歌_爱给网_aigei_com.mp3" type="audio/mpeg">
    您的浏览器不支持音频播放。
  </audio>

  <div class="card">
    <h1>莹宝抽取惩罚系统</h1>
    <button onclick="drawGacha()">抽取惩罚</button>
    <button onclick="clearHistory()">清空抽取记录</button>
    <button onclick="startMusic()">播放音乐</button>
    <button onclick="pauseMusic()">停止音乐</button>
    <div class="result" id="result"></div>
    <div class="card">
      <h2><a href="gacha-pool.html" target="_blank" style="color: #00ccff; text-decoration: underline;">点击查看奖池预览</a></h2>
    </div>
    <div class="card">
      <h2>概率公示</h2>
      <p>5★：10%</p>
      <p>4★：20%</p>
      <p>3★：70%</p>
    </div>
    <div class="card">
      <h2>抽取历史</h2>
      <div id="history" class="history"></div>
    </div>
  </div>

  <script>
    const pool = [
      { name: "💖蒙住眼睛，用嘴巴👄帮迪宝弄出来💖", rarity: 5 },
      { name: "💖蒙住眼睛，趴床上被迪宝打屁股🖐直到迪宝满意为止💖", rarity: 5 },
      { name: "💖把手捆在前面，用脚🦶或手帮迪宝弄出来💖", rarity: 5 },
      { name: "💖光着下半身，对着镜子用屁股蹭迪宝的那里，直到迪宝出来为止💖", rarity: 5 },
      { name: "💖让迪宝替莹宝选择一种姿势来满足迪宝💖", rarity: 5 },
      { name: "对着镜子并缩在迪宝怀里说：“我是迪宝的乖宝宝，喵~”", rarity: 3 },
      { name: "跪坐在迪宝身前，含情脉脉的叫主人", rarity: 3 },
      { name: "蒙上眼睛，允许迪宝对你的身体做任何事，不许反抗", rarity: 4 },
      { name: "趴在迪宝身上叫迪宝10声老公~", rarity: 3 },
      { name: "正对着镜子被迪宝打屁股10下", rarity: 3 },
      { name: "被迪宝挠脚心30秒，笑出声则重抽", rarity: 3 },
      { name: "蒙上眼睛喂迪宝吃东西，弄脏迪宝的脸则要舔干净", rarity: 3 },
      { name: "恭喜你！在抽一次吧", rarity: 3 }
    ];
  
    let forceNextGold = false;
    let forceNextPurple = false;
    let drawSinceLastFiveStar = 0;
    let drawSinceLastFourStar = 0;
    let isFirstDraw = localStorage.getItem('isFirstDraw') !== 'false';
  
    document.addEventListener('keydown', (e) => {
      if (e.key.toLowerCase() === 'd') {
        forceNextGold = true;
        console.log("下次抽卡将必中金色（5★）！");
      }
      if (e.key.toLowerCase() === 's') {
        forceNextPurple = true;
        console.log("下次抽卡将必中紫色（4★）！");
      }
    });
  
    async function drawGacha() {
      const btn = document.querySelector('button[onclick="drawGacha()"]');
      const originalBtnText = btn.textContent;
  
      try {
        btn.disabled = true;
        btn.textContent = '正在抽取...';
  
        const resultElem = document.getElementById("result");
        resultElem.textContent = '🎰 正在抽取中...';
        resultElem.style.color = '#fff';
  
        await new Promise(resolve => setTimeout(resolve, 1500));
  
        let drawn;
        const rand = Math.random();
  
        // ✅ 首次必出紫或金（50%概率）
        if (isFirstDraw) {
          const rarity = Math.random() < 0.5 ? 5 : 4;
          drawn = randomFrom(pool.filter(p => p.rarity === rarity));
          if (rarity === 5) {
            drawSinceLastFiveStar = 0;
            drawSinceLastFourStar++;
          } else {
            drawSinceLastFourStar = 0;
            drawSinceLastFiveStar++;
          }
          isFirstDraw = false;
          localStorage.setItem('isFirstDraw', 'false');
        } else if (forceNextGold || drawSinceLastFiveStar >= 9) {
          drawn = randomFrom(pool.filter(p => p.rarity === 5));
          drawSinceLastFiveStar = 0;
          drawSinceLastFourStar++;
          forceNextGold = false;
        } else if (forceNextPurple || drawSinceLastFourStar >= 5) {
          drawn = randomFrom(pool.filter(p => p.rarity === 4));
          drawSinceLastFourStar = 0;
          drawSinceLastFiveStar++;
          forceNextPurple = false;
        } else {
          let rarity = 3;
          if (rand < 0.1) rarity = 5;
          else if (rand < 0.3) rarity = 4;
          drawn = randomFrom(pool.filter(p => p.rarity === rarity));
  
          // 更新计数器
          if (rarity === 5) {
            drawSinceLastFiveStar = 0;
            drawSinceLastFourStar++;
          } else if (rarity === 4) {
            drawSinceLastFourStar = 0;
            drawSinceLastFiveStar++;
          } else {
            drawSinceLastFiveStar++;
            drawSinceLastFourStar++;
          }
        }
  
        // 展示结果
        resultElem.style.animation = 'none';
        void resultElem.offsetWidth;
        resultElem.style.animation = 'popIn 0.6s ease';
  
        const colorMap = { 5: 'gold', 4: 'violet', 3: 'white' };
        resultElem.style.color = colorMap[drawn.rarity];
        resultElem.textContent = `🎉 抽到 ${drawn.rarity}★ 惩罚！`;
        await new Promise(resolve => setTimeout(resolve, 500));
        resultElem.textContent += `\n${drawn.name}`;
  
        saveToHistory(`${new Date().toLocaleString()} - ${drawn.rarity}★ ${drawn.name}`);
      } finally {
        btn.disabled = false;
        btn.textContent = originalBtnText;
      }
    }
  
    function randomFrom(arr) {
      return arr[Math.floor(Math.random() * arr.length)];
    }
  
    function saveToHistory(entry) {
      const history = JSON.parse(localStorage.getItem("gachaHistory") || "[]");
      history.unshift(entry);
      localStorage.setItem("gachaHistory", JSON.stringify(history));
      renderHistory();
    }
  
    function renderHistory() {
      const history = JSON.parse(localStorage.getItem("gachaHistory") || "[]");
      document.getElementById("history").textContent = history.join("\n");
    }
  
    function clearHistory() {
      if (confirm("确定要清空抽卡记录吗？此操作无法撤销。")) {
        localStorage.removeItem("gachaHistory");
        drawSinceLastFiveStar = 0;
        drawSinceLastFourStar = 0;
        isFirstDraw = true;
        localStorage.setItem('isFirstDraw', 'true');
        renderHistory();
      }
    }
  
    function startMusic() {
      forceNextGold = true;
      document.getElementById("bgm").play();
    }
  
    function pauseMusic() {
      forceNextPurple = true;
      document.getElementById("bgm").pause();
    }
  
    window.onload = renderHistory;
  </script>
  
</body>
</html>
